Option Explicit

Private Sub UserForm_Initialize()
    Call LoadLoginHTML
End Sub

Sub LoadLoginHTML()
    Dim html As String
    html = ""
    html = html & "<!DOCTYPE html>"
    html = html & "<html lang='en'>"
    html = html & "<head>"
    html = html & "    <meta charset='UTF-8'>"
    html = html & "    <meta http-equiv='X-UA-Compatible' content='IE=edge'>"
    html = html & "    <meta name='viewport' content='width=device-width, initial-scale=1.0'>"
    html = html & "    <title>Liquid Drop Login</title>"
    html = html & "    <style>"
    ' --- IMPORT FONT POPPINS ---
    html = html & "        @import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');"
    ' --- RESET & GENERAL ---
    html = html & "        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }"
    html = html & "        body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #e7e7d9; }"
    ' --- CONTAINER ---
    html = html & "        .container { position: relative; left: -80px; display: flex; justify-content: center; align-items: center; }"
    ' --- DROP LOGIN ---
    html = html & "        .container .drop { position: relative; width: 350px; height: 350px; box-shadow: inset 20px 20px 20px rgba(0,0,0,0.05), 25px 35px 20px rgba(0,0,0,0.05), inset -20px -20px 25px rgba(255,255,255,0.9); transition: 0.5s; display: flex; justify-content: center; align-items: center; border-radius: 62% 38% 24% 76% / 59% 60% 40% 41%; }"
    html = html & "        .container .drop:hover { border-radius: 50%; }"
    html = html & "        .container .drop::before, .container .drop::after { content: ''; position: absolute; border-radius: 50%; background: #fff; opacity: 0.9; }"
    html = html & "        .container .drop::before { top: 50px; left: 85px; width: 35px; height: 35px; }"
    html = html & "        .container .drop::after { top: 85px; left: 110px; width: 15px; height: 15px; }"
    ' --- CONTENT ---
    html = html & "        .container .drop .content { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px; gap: 15px; }"
    html = html & "        .container .drop .content h2 { color: #333; font-size: 1.5em; }"
    html = html & "        form { display: flex; flex-direction: column; gap: 20px; width: 100%; }"
    ' --- INPUT BOX ---
    html = html & "        .input-box { position: relative; width: 225px; margin: 0 auto; box-shadow: inset 2px 5px 10px rgba(0,0,0,0.1), inset -2px -5px 10px rgba(255,255,255,1), 15px 15px 10px rgba(0,0,0,0.05), 15px 10px 15px rgba(0,0,0,0.025); border-radius: 25px; }"
    html = html & "        .input-box::before { content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 65%; height: 5px; background: rgba(255,255,255,0.5); border-radius: 5px; }"
    html = html & "        .input-box input { border: none; outline: none; background: transparent; width: 100%; padding: 10px 15px; font-size: 1em; }"
    html = html & "        .input-box input[type='submit'] { color: #fff; text-transform: uppercase; cursor: pointer; letter-spacing: 0.1em; font-weight: 500; }"
    html = html & "        .input-box:last-child { width: 120px; background: #3a86ff; transition: 0.5s; }"
    html = html & "        .input-box:last-child:hover { width: 150px; }"
    ' --- BUTTONS ---
    html = html & "        .btn { position: absolute; right: -120px; bottom: 0; width: 120px; height: 120px; background: #00b4d8; display: flex; justify-content: center; align-items: center; cursor: pointer; text-decoration: none; color: #fff; line-height: 1.2em; letter-spacing: 0.1em; font-size: 0.8em; transition: 0.25s; text-align: center; box-shadow: inset 10px 10px 10px rgba(0,180,216,0.05), 15px 25px 10px rgba(0,180,216,0.1), inset -10px -10px 15px rgba(255,255,255,0.5); border-radius: 44% 56% 65% 35% / 57% 58% 42% 43%; }"
    html = html & "        .btn::before { content: ''; position: absolute; top: 15px; left: 30px; width: 20px; height: 20px; border-radius: 50%; background: #fff; opacity: 0.45; }"
    html = html & "        .btn.signup { bottom: 150px; right: -140px; width: 80px; height: 80px; background: #f77f00; border-radius: 49% 51% 52% 48% / 63% 59% 41% 37%; }"
    html = html & "        .btn.signup::before { left: 20px; width: 15px; height: 15px; }"
    html = html & "        .btn:hover { border-radius: 50%; }"
    ' --- HIDDEN FORMS ---
    html = html & "        .signup-form { display: none; }"
    html = html & "    </style>"
    html = html & "</head>"
    html = html & "<body>"

    ' === LOGIN FORM ===
    html = html & "    <div class='container' id='loginForm'>"
    html = html & "        <div class='drop'>"
    html = html & "            <div class='content'>"
    html = html & "                <h2>Login</h2>"
html = html & "                <form id='loginFormInner'>"
html = html & "                    <div class='input-box'>"
html = html & "                        <input type='text' name='username' placeholder='Username'>"
html = html & "                    </div>"
html = html & "                    <div class='input-box'>"
html = html & "                        <input type='password' name='password' placeholder='Password'>"
html = html & "                    </div>"
html = html & "                    <div class='input-box'>"
html = html & "                        <input type='button' value='Login' onclick='submitLogin()'>"
html = html & "                    </div>"
html = html & "                </form>"

    html = html & "            </div>"
    html = html & "        </div>"
    html = html & "        <a href='#' class='btn' id='goForgot'>Forgot Password</a>"
    html = html & "        <a href='#' class='btn signup' id='goSignup'>Signup</a>"
    html = html & "    </div>"

    ' === SIGNUP FORM ===
    html = html & "    <div class='container signup-form' id='signupForm'>"
    html = html & "        <div class='drop'>"
    html = html & "            <div class='content'>"
    html = html & "                <h2>Create Account</h2>"
    html = html & "                <form id='signupFormInner'>"
    html = html & "                    <div class='input-box'>"
    html = html & "                        <input type='text' name='kode' placeholder='Kode' required>"
    html = html & "                    </div>"
    html = html & "                    <div class='input-box'>"
    html = html & "                        <input type='text' name='username' placeholder='Username' required>"
    html = html & "                    </div>"
    html = html & "                    <div class='input-box'>"
    html = html & "                        <input type='password' name='password' placeholder='Password' required>"
    html = html & "                    </div>"
    html = html & "                    <div class='input-box'>"
    html = html & "                        <input type='button' value='Save' onclick='submitSignup()'>"
    html = html & "                    </div>"
    html = html & "                </form>"
    html = html & "            </div>"
    html = html & "        </div>"
    html = html & "        <a href='#' class='btn' style='background:#8e44ad;' id='goBack'>Back</a>"
    html = html & "    </div>"

    ' === JAVASCRIPT (TANPA ERROR) ===
    html = html & "    <script type='text/javascript'>"
    html = html & "        function showSignup() {"
    html = html & "            document.getElementById('loginForm').style.display = 'none';"
    html = html & "            document.getElementById('signupForm').style.display = 'flex';"
    html = html & "        }"
    html = html & "        function showLogin() {"
    html = html & "            document.getElementById('signupForm').style.display = 'none';"
    html = html & "            document.getElementById('loginForm').style.display = 'flex';"
    html = html & "        }"
    html = html & "        function submitSignup() {"
    html = html & "            var f = document.getElementById('signupFormInner');"
    html = html & "            var kode = encodeURIComponent(f.kode.value);"
    html = html & "            var user = encodeURIComponent(f.username.value);"
    html = html & "            var pass = encodeURIComponent(f.password.value);"
    html = html & "            window.location.href = 'createuser?kode=' + kode + '&username=' + user + '&password=' + pass;"
    html = html & "        }"
    
    html = html & "        function submitLogin() {"
html = html & "            var f = document.getElementById('loginFormInner');"
html = html & "            var user = encodeURIComponent(f.username.value);"
html = html & "            var pass = encodeURIComponent(f.password.value);"
html = html & "            window.location.href = 'login?username=' + user + '&password=' + pass;"
html = html & "        }"

    html = html & "        document.addEventListener('DOMContentLoaded', function() {"
    html = html & "            document.getElementById('goSignup').onclick = function(e) { e.preventDefault(); showSignup(); };"
    html = html & "            document.getElementById('goBack').onclick = function(e) { e.preventDefault(); showLogin(); };"
    html = html & "        });"
    
    html = html & "    </script>"
    html = html & "</body>"
    html = html & "</html>"

    ' Load HTML
    With WebBrowser1
        .Navigate "about:blank"
        Do While .Busy Or .ReadyState <> 4: DoEvents: Loop
        .Document.Write html
        .Document.Close
    End With
End Sub
Private Sub WebBrowser1_BeforeNavigate2(ByVal pDisp As Object, URL As Variant, _
    Flags As Variant, TargetFrameName As Variant, PostData As Variant, _
    Headers As Variant, Cancel As Boolean)

    Dim urlStr As String
    urlStr = CStr(URL)
    If urlStr = "" Then Exit Sub

    ' ---------- PROSES SIGNUP (createuser?kode=...&username=...&password=...) ----------
    If InStr(1, urlStr, "createuser?", vbTextCompare) > 0 Then
        Cancel = True

        Dim qs As String
        qs = Mid$(urlStr, InStr(1, urlStr, "?", vbTextCompare) + 1)
        If Len(qs) = 0 Then
            MsgBox "Data signup tidak ditemukan.", vbExclamation
            Exit Sub
        End If

        Dim pairs() As String
        pairs = Split(qs, "&")

        Dim kode As String, uname As String, pwd As String
        Dim idx As Long
        For idx = LBound(pairs) To UBound(pairs)
            Dim kv() As String
            kv = Split(pairs(idx), "=")
            If UBound(kv) >= 1 Then
                Select Case LCase$(kv(0))
                    Case "kode": kode = DecodeURL(kv(1))
                    Case "username": uname = DecodeURL(kv(1))
                    Case "password": pwd = DecodeURL(kv(1))
                End Select
            End If
        Next idx

        If Trim$(kode) = "" Or Trim$(uname) = "" Or Trim$(pwd) = "" Then
            MsgBox "Semua kolom harus diisi!", vbExclamation
            Exit Sub
        End If

        If IsUserExists(kode, uname) Then
            MsgBox "Kode atau Username sudah digunakan!", vbCritical
            Exit Sub
        End If

        With ThisWorkbook.Sheets("Users")
            Dim nextRow As Long
            nextRow = .Cells(.Rows.Count, "A").End(xlUp).Row + 1
            .Cells(nextRow, 1).Value = kode
            .Cells(nextRow, 2).Value = uname
            .Cells(nextRow, 3).Value = pwd
        End With

        MsgBox "Akun berhasil dibuat!", vbInformation
        Exit Sub
    End If

    ' ---------- PROSES LOGIN (login?username=...&password=...) ----------
    If InStr(1, urlStr, "login?", vbTextCompare) > 0 Then
        Cancel = True

        Dim qsl As String
        qsl = Mid$(urlStr, InStr(1, urlStr, "?", vbTextCompare) + 1)
        If Len(qsl) = 0 Then
            MsgBox "Data login tidak diterima.", vbExclamation
            Exit Sub
        End If

        Dim ppairs() As String
        ppairs = Split(qsl, "&")

        Dim usr As String, pwdLogin As String
        Dim j As Long
        For j = LBound(ppairs) To UBound(ppairs)
            Dim kv2() As String
            kv2 = Split(ppairs(j), "=")
            If UBound(kv2) >= 1 Then
                Select Case LCase$(kv2(0))
                    Case "username": usr = DecodeURL(kv2(1))
                    Case "password": pwdLogin = DecodeURL(kv2(1))
                End Select
            End If
        Next j

        usr = Trim$(usr)
        pwdLogin = Trim$(pwdLogin)

        If usr = "" Then
            MsgBox "Harap isi Username!", vbExclamation: Exit Sub
        End If
        If pwdLogin = "" Then
            MsgBox "Harap isi Password!", vbExclamation: Exit Sub
        End If

        If ValidateLogin(usr, pwdLogin) Then
            MsgBox "Login berhasil! Selamat datang, " & usr, vbInformation
            ' Unload Me  ' -> buka form utama di sini jika perlu
        Else
            MsgBox "Username atau Password salah!", vbCritical
        End If

        Exit Sub
    End If

End Sub

Function DecodeURL(s As String) As String
    s = Replace(s, "+", " ")
    s = Replace(s, "%20", " ")
    s = Replace(s, "%40", "@")
    s = Replace(s, "%21", "!")
    s = Replace(s, "%26", "&")
    s = Replace(s, "%3D", "=")
    DecodeURL = s
End Function

Function IsUserExists(kode As String, username As String) As Boolean
    Dim ws As Worksheet: Set ws = ThisWorkbook.Sheets("Users")
    Dim lastRow As Long: lastRow = ws.Cells(ws.Rows.Count, "A").End(xlUp).Row
    Dim i As Long
    For i = 2 To lastRow
        If ws.Cells(i, 1).Value = kode Or ws.Cells(i, 2).Value = username Then
            IsUserExists = True: Exit Function
        End If
    Next i
    IsUserExists = False
End Function

Function ValidateLogin(username As String, password As String) As Boolean
    Dim ws As Worksheet: Set ws = ThisWorkbook.Sheets("Users")
    Dim lastRow As Long: lastRow = ws.Cells(ws.Rows.Count, "B").End(xlUp).Row
    Dim i As Long
    For i = 2 To lastRow
        If Not IsEmpty(ws.Cells(i, 2)) Then
            If Trim(ws.Cells(i, 2).Value) = Trim(username) And Trim(ws.Cells(i, 3).Value) = Trim(password) Then
                ValidateLogin = True: Exit Function
            End If
        End If
    Next i
    ValidateLogin = False
End Function